<template>
  <a-card style="margin-top: 10px;padding: 0px;">
    <a-button v-for="item of blogTags" v-bind:key="item.tagId" hoverable type="dashed" icon="tag" class="blog-tag-btn"
              @click="blogTagItemClick(item)">
      {{item.tagName}}({{item.count}})
    </a-button>
  </a-card>
</template>

<script>
  // import { blogPageQuery } from '@/api/blog'
  import { mapGetters, mapActions } from 'vuex'
  export default {
    name: 'BlogTagItemList',
    data: function() {
      return {}
    },
    computed: {
      ...mapGetters(['blogTags'])
    },
    created() {
    },
    methods: {
      ...mapActions(['setBlogPageData']),
      /**
       * 博客标签点击
       */
      blogTagItemClick(item) {
        this.setBlogPageData({ current: 1, size: 6, tagId: item.tagId })
        document.getElementById('blogCarousel').scrollIntoView(true, {
          behavior: 'smooth',
          block: 'start',
          inline: 'nearest'
        })
      }
    }
  }
</script>

<style scoped>
  .blog-tag-btn {
    padding: 4px 4px;
    border-radius: 8px;
  }
</style>